<template>
<!--  <div style="float:right;width: 300px; border-style:solid; border-color:red;">-->
<!--    &lt;!&ndash;forceFit &ndash;&gt;-->
<!--    &lt;!&ndash;图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度&ndash;&gt;-->
<!--    &lt;!&ndash;如果这时外面这个div的宽没有设置，而forceFit为true时，且div设置了浮动那么&ndash;&gt;-->
<!--    &lt;!&ndash;div会没有宽度，那么就会把图标遮住&ndash;&gt;-->
<!--    <v-chart  :forceFit="true" :height="height" :data="data" :scale="scale" style="left: auto">-->
<!--      <v-tooltip :showTitle="false" data-key="item*percent"/>-->
<!--      <v-axis/>-->
<!--      &lt;!&ndash;最下面那个每个元素的名字&ndash;&gt;-->
<!--      <v-legend data-key="item"/>-->
<!--      <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig"/>-->
<!--      <v-coord type="theta" :radius="0.75" :innerRadius="0.6"/>-->
<!--    </v-chart>-->
<!--  </div>-->
  <div style="height: 90%; width: 90%">
    <a @click="loadMap">添加</a>
  <div id="map" >
  </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
// import echarts from 'echarts'
import * as echarts from 'echarts'
import spbGeo from '@/assets/spb-geo-detail.json'
echarts.registerMap('SPB', spbGeo)
export default {
  name: 'BigScreen',
  data () {
    return {
      myChart: null,
      dv: undefined,
      sourceData: [
        { item: '学习', count: 40 },
        { item: '听歌', count: 21 },
        { item: '锻炼', count: 17 },
        { item: '游戏', count: 13 },
        { item: '发呆', count: 9 }
      ],
      data: undefined,
      scale: [
        {
          dataKey: 'percent',
          min: 0,
          formatter: '.0%'
        }
      ],
      height: 300,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 5
      },
      labelConfig: [
        'percent',
        {
          formatter: (val, item) => {
            console.log(val)
            console.log(item)
            return item.point.item + ': ' + val
          }
        }
      ]
    }
  },
  methods: {
    ...mapActions(['GetRoleAndPermission', 'GetMapData']),
    temp () {
      const { GetMapData } = this
      GetMapData().then(res => {
        console.log(res)
        this.sourceData = res
        const DataSet = require('@antv/data-set')
        this.dv = new DataSet.View().source(this.sourceData)
        this.dv.transform({
          type: 'percent',
          field: 'count',
          dimension: 'item',
          as: 'percent'
        })
        this.data = this.dv.rows
      })
    },
    loadMap () {
      // eslint-disable-next-line no-undef
      Vue.prototype.$echarts = echarts
      const map = document.getElementById('map')
      this.myChart = echarts.init(map)
      echarts.registerMap('SPB', spbGeo)
      // setTimeout(() => this.reload(), 1000)
    }
  },
  created () {
    this.temp()
  }
}
</script>

<style scoped>
#map {
  height: 80%;
  width: 80%;
  border-style: dashed;
  border-color: red;
}
</style>
